<template>
  <div id="infoprofile">
    <el-form ref="userInfoform" :model="userInfoform" label-width="80px">
<!--打包 把api改为代理-->
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action=""
          :disabled="isdisabled"
          :show-file-list="false"
          :http-request="beforeAvatarUpload">
          <img v-if="userInfoform.image" :src="userInfoform.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input :disabled=isdisabled v-model="userInfoform.nickname"></el-input>
      </el-form-item>
      <el-form-item label="QQ">
        <el-input :disabled=isdisabled v-model="userInfoform.qq"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input :disabled=isdisabled v-model="userInfoform.email"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input :disabled=isdisabled v-model="userInfoform.phone"></el-input>
      </el-form-item>
      <el-form-item label="工作">
        <el-input :disabled=isdisabled v-model="userInfoform.work"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input :disabled=isdisabled v-model="userInfoform.address"></el-input>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="userInfoform.hobbies">
          <el-checkbox :disabled=isdisabled label="二次元" name="hobbies"></el-checkbox>
          <el-checkbox :disabled=isdisabled label="运动" name="hobbies"></el-checkbox>
          <el-checkbox :disabled=isdisabled label="美食爱好者" name="hobbies"></el-checkbox>
          <el-checkbox :disabled=isdisabled label="时尚达人" name="hobbies"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="自我介绍">
        <el-input :disabled=isdisabled type="textarea" v-model="userInfoform.intro"></el-input>
      </el-form-item>
      <el-form-item label="积分">
        <el-input :disabled="true"  v-model="userInfoform.points"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button v-if="isdisabled" type="primary" @click="onUpdate">点击修改</el-button>
        <el-button v-else type="primary" @click="onSubmit">修改完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "InfoProfile",
    data() {
      return {
        userInfoform: {
          image: this.$store.state.userInfo.image,
          nickname: this.$store.state.userInfo.nickname,
          qq: this.$store.state.userInfo.qq,
          email: this.$store.state.userInfo.email,
          work: this.$store.state.userInfo.work,
          address: this.$store.state.userInfo.address,
          hobby: this.$store.state.userInfo.hobby,
          hobbies: this.$store.state.userInfo.hobby,
          intro: this.$store.state.userInfo.intro,
          points: this.$store.state.userInfo.points,
          uid: this.$store.state.userInfo.uid,
          phone:this.$store.state.userInfo.phone,
          areaId: this.$store.state.userInfo.areaId
        },
        isdisabled: true,
      }
    },
    methods: {
      //头像
      beforeAvatarUpload(FileData) {
        const file =FileData.file
        console.log(file);
        const fd = new FormData();//通过form数据格式来传
        fd.append("file", file); //传文件
        this.$http({
          url: '/user/uploadAvatar',
          method: 'post',
          data: fd
        }).then(res => {
          console.log(res.data);
          this.userInfoform.image = res.data

        }).catch(err => {
          console.log(err);
        })
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        //
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        //
        // return isJPG && isLt2M;
      },
      //点击变为可更改
      onUpdate () {
        this.isdisabled = false
      },
      //检查QQ
      checkQQ(){
        const reg = /^[1-9][0-9]{4,9}$/gim;
        if ( reg.test(this.userInfoform.qq)) {
          return true
        } else {
          this.$message.error("qq输入错误")
          return false
        }
      },
      //检查手机
      checkPhone(callback){
        const myphone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if( myphone.test(this.userInfoform.phone) ){
          this.$http({
            method: 'post',
            url: '/user/checkPhone/'+this.userInfoform.phone+'/'+this.$store.state.user.uid
          }).then(res => {
            if (res.data){
              this.$message.error('手机号已绑定别的账号')
              callback(!res.data)
            }else {
              callback(!res.data)
            }
          }).catch(err => {
            console.log(err);
          })
        } else {
          this.$message.error('手机号输入错误')
          return false
        }
      },

      //点击修改完成
      onSubmit() {
        //把hobby改成字符串
        this.userInfoform.hobby = this.userInfoform.hobbies.toString()
        let qq = true
        let phone = true
        let aa
        if (this.userInfoform.qq !==''&& this.userInfoform.qq!==null)
          qq = this.checkQQ()
        if (this.userInfoform.phone !==''|| this.userInfoform.phone!==null){
          //检查手机
          phone = this.checkPhone(res=>{
            console.log(res);
            if (res && qq) {
              alert(qq)
              //有修改就调用
              this.$store.commit('setuserInfo',this.userInfoform)
              console.log(this.$store.state.userInfo);
              this.$http({
                method: 'post',
                url: '/user/updateInfo',
                data: this.$store.state.userInfo
              }).then(res => {
                this.isdisabled = true
              }).catch(err => {
                console.log(err);
              })
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  #infoprofile {
    background-color: #ffffff;
    padding: 50px 50px;
  }
  /deep/ .el-form-item__content{
    text-align: left;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
